<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
  <div style="overflow: hidden">
    <el-backtop :bottom="100" :visibility-height="100"></el-backtop>
    <!--关键数据-->
    <el-card shadow="never" body-style="padding: 0px">
      <div>
        <el-row style="padding: 16px 0px;margin-left: 12px;">
          <el-col :span="20">
            <ft-return-btn text="返回客户列表" @click="goBackList()"></ft-return-btn>
          </el-col>
          <el-col :span="4">
            <div style='float:right'>
              <ft-operation-log :source-id="customerId"></ft-operation-log>
            </div>
          </el-col>
        </el-row>

        <el-row v-show="!editMain" style="padding: 0px 12px">
          <el-col :span="4" align="left" style="line-height: 36px">
            <span style="font-size: 14px;color: #747778">基础关键资料</span>
          </el-col>
        </el-row>

        <div :class="{cardBackColor:!editMain}" style="margin: 0px 12px">
          <el-row v-if="editMain">
            <el-col align="left" style="white-space: nowrap" :span="23">
            <span
              style="font-size: 28px;color: #2A2D2E;line-height: 36px;text-align: left"><b>{{corp.customerName}}</b></span><br/>
            </el-col>
            <el-col align="right" :span="1">
              <el-button v-show="editMain && editable" size="small" @click="edit()" plain>编辑</el-button>
            </el-col>
          </el-row>
          <el-form ref="corp"
                   :model="corp"
                   :rules="rules"
                   style="text-align: left;padding-top: 12px" inline>
            <el-row>
              <el-col v-if="!editMain" :md="8" :lg="6">
                <el-form-item label="客户名称" prop="customerName">
                  <ft-input v-model="corp.customerName" :editing="!editMain">
                  </ft-input>
                </el-form-item>
              </el-col>
              <el-col :md="8" :lg="6">
                <el-form-item label="证件类型" prop="identityType">
                  <ft-enum-select v-model="corp.identityType"
                                  service-name="lss-customer"
                                  type-name="certificateType"
                                  placeholder="请选择证件类型"
                                  :editing="!editMain">
                  </ft-enum-select>
                </el-form-item>
              </el-col>

              <el-col :md="8" :lg="6">
                <el-form-item label="证件号码" prop="identityNo">
                  <span v-if="editMain">{{corp.identityNo}}</span>
                  <el-input v-else v-model="corp.identityNo"></el-input>
                </el-form-item>
              </el-col>

              <el-col :md="8" :lg="6">
                <el-form-item label="主办客户经理" prop="mainManagerId">
                  <ft-user v-model="corp.mainManagerId"
                           :editable="!editMain"
                           :customerManagerId="corp.mainManagerId"
                           @matchedOption="mainManagerChangeMatched"
                           @unmatchedOption="mainManagerChangeMatched"/>
                </el-form-item>
              </el-col>

              <el-col :md="8" :lg="6">
                <el-form-item label="协办客户经理" prop="viceManagerId">
                  <ft-user-with-filter ref="viceManagerRef"
                                       v-model="corp.viceManagerId"
                                       :editable="!editMain"
                                       :customerManagerId="corp.viceManagerId"
                                       @matchedOption="viceManagerChangeMatched"
                                       @unmatchedOption="viceManagerChangeMatched">
                  </ft-user-with-filter>
                </el-form-item>
              </el-col>

              <el-col :md="8" :lg="6">
                <el-form-item label="所属部门" prop="deptName">
                  <ft-input :editing="false" v-model="corp.deptName"></ft-input>
                </el-form-item>
              </el-col>

              <el-col :md="8" :lg="6">
                <el-form-item label="客户评级等级" prop="ratingGrade">
                  <ft-enum-select v-model="corp.ratingGrade"
                                  service-name="lss-customer"
                                  type-name="ratingGrade"
                                  :editing="false">
                  </ft-enum-select>
                </el-form-item>
              </el-col>

              <el-col :md="8" :lg="6">
                <el-form-item label="风险预警等级" prop="riskWarningGrade">
                  <ft-enum-select v-model="corp.riskWarningGrade"
                                  service-name="lss-customer"
                                  type-name="riskWarningGrade"
                                  :editing="false">
                  </ft-enum-select>
                </el-form-item>
              </el-col>


              <el-col :md="8" :lg="6">
                <el-form-item label="资产五级分类" prop="assetRiskGrade">
                  <ft-enum-select v-model="corp.assetRiskGrade"
                                  service-name="lss-customer"
                                  type-name="assetRiskGrade"
                                  :editing="false">
                  </ft-enum-select>
                </el-form-item>
              </el-col>

              <el-col :md="8" :lg="6">
                <el-form-item label="反洗钱等级" prop="amlGrade">
                  <ft-enum-select v-model="corp.amlGrade"
                                  service-name="lss-customer"
                                  type-name="amlGrade"
                                  :editing="false">
                  </ft-enum-select>
                </el-form-item>
              </el-col>
            </el-row>
            <hr style="background-color: #EDEDED;border: none;height: 1px;margin: 0px"/>

            <el-row>
              <el-col align="right">
                <el-button size="mini"
                           @click="cancel()"
                           :disabled="editMain"
                           v-if="!editMain">取消
                </el-button>
                <el-button type="primary"
                           size="mini"
                           @click="onSave()"
                           v-if="!editMain"
                           style="margin-left: 24px"
                           :disabled="editMain || saveStatus">保存
                </el-button>

              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>


      <!--详细信息-->
      <div>
        <el-dropdown
          v-if="(!showTabInfo || !showTabShareholder || !showTabFinance ||  !showTabAtt || !showTabInv || !showTabMar || !showTabGua) && editMain"
          @command="addTab"
          class="add-tabs"
          trigger="click"
          :show-timeout="outTime" :hide-timeout="outTime"
          style="float: right;z-index:999;position:relative;right: 12px;top: 9px;">
          <el-button type="primary"
                     style="padding: 7px 18px 7px 8px;font-size: 14px;line-height: 20px;"
                     @click="" round>
            <span style="padding: 2px 0px;">
              <i class="joys-icon-addagain" style="margin-right: 18px;"/>继续添加</span>
          </el-button>
          <el-dropdown-menu slot="dropdown" style="background-color: #353737" class="add-tabs-menu">
            <el-dropdown-item :disabled="showTabInfo" command="tabInfo" class="add-tabs-item">
              <div style="font-size: 12px;line-height: 28px;margin: 7px 7px 2px">
                <i class="joys-icon-checkreport" style="margin-left: 6px"/>
                <span style="margin-left: 11px;margin-right: 27px">基本信息</span>
              </div>
            </el-dropdown-item>
            <el-dropdown-item :disabled="showTabShareholder" command="tabShareholder" class="add-tabs-item">
              <div style="font-size: 12px;line-height: 28px;margin: 7px 7px 2px">
                <i class="joys-icon-checkreport" style="margin-left: 6px"/>
                <span style="margin-left: 11px;margin-right: 27px">股东高管</span>
              </div>
            </el-dropdown-item>
            <el-dropdown-item :disabled="showTabFinance" command="tabFinance" class="add-tabs-item">
              <div style="font-size: 12px;line-height: 28px;margin: 7px 7px 2px">
                <i class="joys-icon-checkreport" style="margin-left: 6px"/>
                <span style="margin-left: 11px;margin-right: 27px">财报信息</span>
              </div>
            </el-dropdown-item>
            <el-dropdown-item :disabled="showTabInv" command="showTabInv" class="add-tabs-item">
              <div style="font-size: 12px;line-height: 28px;margin: 2px 7px 7px">
                <i class="joys-icon-attachment" style="margin-left: 6px"/>
                <span style="margin-left: 11px;margin-right: 27px">资产信息</span>
              </div>
            </el-dropdown-item>
            <el-dropdown-item :disabled="showTabMar" command="showTabMar" class="add-tabs-item">
              <div style="font-size: 12px;line-height: 28px;margin: 2px 7px 7px">
                <i class="joys-icon-attachment" style="margin-left: 6px"/>
                <span style="margin-left: 11px;margin-right: 27px">渠道及客户</span>
              </div>
            </el-dropdown-item>
            <el-dropdown-item :disabled="showTabGua" command="showTabGua" class="add-tabs-item">
              <div style="font-size: 12px;line-height: 28px;margin: 2px 7px 7px">
                <i class="joys-icon-attachment" style="margin-left: 6px"/>
                <span style="margin-left: 11px;margin-right: 27px">融资及担保</span>
              </div>
            </el-dropdown-item>
            <el-dropdown-item :disabled="showTabAtt" command="tabAtt" class="add-tabs-item">
              <div style="font-size: 12px;line-height: 28px;margin: 2px 7px 7px">
                <i class="joys-icon-attachment" style="margin-left: 6px"/>
                <span style="margin-left: 11px;margin-right: 27px">附件信息</span>
              </div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div style="height: 54px;margin: 0px;display: flex;justify-content: space-around"
             v-show="(!showTabInfo && !showTabShareholder && !showTabFinance &&  !showTabAtt && !showTabInv && !showTabMar & !showTabGua) && editMain"></div>

        <el-tabs v-model="tabsindex" @tab-click="tab" stretch>
          <el-tab-pane v-if="showTabInfo" name="0" label="基本资料" style="background-color: #F0F3F6">
            <div style="padding: 19px 24px">
              <!--基本信息-->
              <el-card>
                <corp-info :customerId="customerId"
                           @registeredAddress="invoiceAddress"
                           :dataVersion="dataVersion"
                           :editable="editable"
                           v-on:infoValue="infoValue"/>
              </el-card>
              <!--联系人信息-->
              <el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px">
                <linkman :customerId="customerId"/>
              </el-card>
              <!--银行账户-->
              <el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px">
                <bank-account :sourceBillId="customerId"
                              :customerName="corp.customerName"/>
              </el-card>
              <!--开票信息-->
              <el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px">
                <cust-invoice :customerId="customerId"
                              :customerName="corp.customerName"
                              :identityType="corp.identityType"
                              :identityNo="corp.identityNo"
                              :invoiceAddress="registeredAddress"
                              sourceBillType="lss_customer_corp"/>
              </el-card>
            </div>
          </el-tab-pane>

          <el-tab-pane v-if="showTabShareholder" name="1" label="股东高管信息">
            <!--股东信息-->
            <el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px;margin-top: 13px">
              <Shareholder :customerId="customerId" :editable="editable"/>
            </el-card>
            <!--高管信息-->
            <el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px">
              <CustManager :customerId="customerId" :editable="editable"/>
            </el-card>
            <!--实际控制人信息-->
            <el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px;margin-top: 13px">
              <ActualController :customerId="customerId" :editable="editable"/>
            </el-card>
          </el-tab-pane>

          <el-tab-pane v-if="showTabFinance" name="2" label="财报信息">
            <el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px;margin-top: 13px">
              <iframe style="width: 100%;height: 700px;border:none;margin: 0;overflow: hidden" v-if="corp.stockCode"
                      :src="fengbaoFinReportUrl"></iframe>
              <finance-report v-else :customerId="customerId" :editable="editable"/>
            </el-card>
          </el-tab-pane>

          <el-tab-pane v-if="showTabInv" name="3" label="资产信息">
            <el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px;margin-top: 13px">
              <investment :customerId="customerId" :editable="editable"></investment>
            </el-card>
          </el-tab-pane>

          <el-tab-pane v-if="showTabMar" name="4" label="渠道及客户信息">
            <el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px;margin-top: 13px">
              <purchase-channels :customerId="customerId" :editable="editable"></purchase-channels>
            </el-card>
            <el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px;margin-top: 13px">
              <sales-channels :customerId="customerId" :editable="editable"></sales-channels>
            </el-card>
          </el-tab-pane>

          <el-tab-pane v-if="showTabGua" name="5" label="融资及担保信息">
            <el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px;margin-top: 13px">
              <financing-info :customerId="customerId" :editable="editable"></financing-info>
            </el-card>
            <el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px;margin-top: 13px">
              <guarantee-info :customerId="customerId" :editable="editable"></guarantee-info>
            </el-card>
          </el-tab-pane>

          <el-tab-pane v-if="showTabAtt" name="6" label="附件信息">
            <el-card body-style="padding: 0px 12px 12px;" style="margin-bottom: 8px;margin-top: 13px">
              <ft-attach v-if="corp&&corp.customerId" title="附件信息" sourceType="CUSTOMER"
                         :sourceId="corp.customerId"
                         :categories="attachClass"
                         :categories-disabled="categoriesDisabled"
                         :basePath="'/doc/generate/客户维护/'+corp.customerId"></ft-attach>
            </el-card>
          </el-tab-pane>
        </el-tabs>

      </div>
    </el-card>

  </div>
</template>

<script>
  import FinancingInfo from "../tabs/FinancingInfo"
  import GuaranteeInfo from "../tabs/GuaranteeInfo"
  import PurchaseChannels from "../tabs/PurchaseChannels"
  import SalesChannels from "../tabs/SalesChannels"
  import CustomerCorpAdd from "./CustomerCorpAdd"
  import CorpInfo from "../tabs/CorpInfo"
  import Linkman from "../tabs/Linkman"
  import BankAccount from "../tabs/BankAccount"
  import CustInvoice from "../tabs/CustInvoice"
  import Shareholder from "../tabs/Shareholder"
  import CustManager from "../tabs/CustManager"
  import ActualController from "../tabs/ActualController"
  import FinanceReport from "../tabs/FinanceReport"
  import FtUser from "../ft/FtUser"
  import FtUserWithFilter from "../ft/FtUserWithFilter"
  import FtInput from "../ft/FtInput"
  import {existsCustName, existsCustNo, identityCorpFormat} from "@/pages/pc/assets/js/validate/rule.js"
  import Investment from "../tabs/Investment";
  import {categories} from 'lss-ui/src/components/js/AttachClass'

  export default {
    name: "CustomerCorp",
    props: {
      propsBind: {
        //展示页面
        currentPage: {
          default: 1
        },
        //页面条数
        pageSize: {
          default: 8
        }
      },
      customerId: String,
      initEdit: Boolean,
      fromNode: String,

    },
    components: {
      Investment,
      FinancingInfo,
      GuaranteeInfo,
      PurchaseChannels,
      SalesChannels,
      CustomerCorpAdd,
      CorpInfo,
      Linkman,
      BankAccount,
      CustInvoice,
      CustManager,
      Shareholder,
      ActualController,
      FinanceReport,
      FtUser,
      FtUserWithFilter,
      FtInput
    },

    watch: {
      corp: {
        handler(val) {
          // 过滤条件
          let viceManagerFilter = ''
          if (val.deptId) {
            viceManagerFilter = 'dt.dept_id = \'' + val.deptId + '\''
          }
          this.$refs.viceManagerRef.load(viceManagerFilter)
        },
        deep: true,
      },
      confirmStatus: {
        handler(val) {
          if ('CONFIRMED' === val) {
            this.editable = false
          } else if ('UNCONFIRMED' === val) {
            this.editable = true
          }
        }
      },
    },
    mounted() {
      this.load()
      this.loadUpload(this.customerId)
      categories(this, 'AttachClass', rest => {
        this.attachClass = rest
      })
    },
    data() {
      //根据客户名称判断是否已存在、
      let validateCustName = (rule, value, callback) => {
        const _this = this
        if (this.corpbak.customerName && value != this.corpbak.customerName && value && value != '') {
          existsCustName(_this, rule, value, callback)
        } else {
          callback()
        }
      }
      //根据证件号码判断是否已存在 num
      let validateCustNum = (rule, value, callback) => {
        const _this = this
        if (this.corp.identityType == '') {
          callback(new Error('请选择客户证件类型'))
        } else {
          if (value && value != '') {
            if (!identityCorpFormat(this.corp.identityType, value)) {
              callback(new Error('输入证件号码不合法'))
            } else if (this.corpbak.identityNo !== value) {
              // 当前的证件号与备份证件号不同时才需要校验是否重复
              existsCustNo(_this, rule, value, callback)
            } else {
              callback()
            }
          } else {
            callback()
          }
        }
      }
      return {
        tabsindex: '0',
        fileList: [],
        //附件分类
        attachClass: [],
        corp: {
          customerId: '',
          customerName: '',
          identityType: '',
          identityNo: '',
          customerProperty: '',
          mainManagerId: '',
          viceManagerId: '',
          mainManagerName: '',
          viceManagerName: '',
          deptName: '',
          deptId: '',
        },
        categoriesDisabled: {
          融资业务申请书: {
            upload: true, delete: false
          },
        },
        corpbak: {},
        // 当前单据的确认状态
        confirmStatus: '',
        // 当前表单是否可编辑
        editable: false,
        saveStatus: false,
        editMain: true,
        showTabInfo: false,
        showTabShareholder: false,
        showTabFinance: false,
        showTabAtt: false,
        showTabInv: false,
        showTabMar: false,
        showTabGua: false,
        infoMenu: [],
        fengbaoFinReportUrl: null,
        registeredAddress: '',
        dataVersion: 0,
        outTime: 0,
        rules: {
          customerName:
            [{required: true, message: '客户名称不能为空', trigger: 'blur'},
              {max: 80, message: '不能超过80字符', trigger: 'blur'},
              {validator: validateCustName, trigger: 'blur'}],
          identityType:
            [{required: true, message: '证件类型不能为空', trigger: 'change'}],
          identityNo:
            [{required: true, message: '证件类型不能为空', trigger: 'blur'},
              {max: 50, message: '不能超过50字符', trigger: 'blur'},
              {validator: validateCustNum, trigger: 'blur'}],
          mainManagerId:
            [{required: true, message: '主办客户经理不能为空', trigger: 'change'}],
          viceManagerId:
            [{required: true, message: '协办客户经理不能为空', trigger: 'change'}],
        },
      }
    },
    methods: {
      matchingDept(val) {
        this.$set(this.corp, 'deptId', val.deptId)
      },
      tab(val) {
        this.tabsindex = val.name;
      },
      goBackList() {
        if (this.fromNode === 'PROJECT_APPROVAL') {
          // 如果是从立项节点跳转过来的, 返回列表时需跳转至客户信息维护节点
          this.$bus.sendMessage("OPEN_APPLET", {appletId: '200510'});
        } else {
          this.$emit('returnValue', {
            switchShow: 'cust-list',
            propsBind: this.propsBind,
            customerId: null,
            initEdit: false
          });
        }
      },
      load() {
        this.$http.get('/joys-rest/lss-customer/custInfo/corp/' + this.customerId).then(
          resp => {
            this.corp = resp.body
            this.confirmStatus = this.corp.confirmStatus
            this.editMain = this.initEdit
            this.dataVersion = this.corp.dataVersion
            if (this.corp.infoMenu && this.corp.infoMenu != '') {
              //初始化tab页签显示, 设置显示那个页签
              if (this.corp.infoMenu.indexOf('tabAtt') > -1) {
                this.showTabAtt = true
                this.tabsindex = "6"
              }
              if (this.corp.infoMenu.indexOf('showTabGua') > -1) {
                this.showTabGua = true
                this.tabsindex = "5"
              }
              if (this.corp.infoMenu.indexOf('showTabMar') > -1) {
                this.showTabMar = true
                this.tabsindex = "4"
              }
              if (this.corp.infoMenu.indexOf('showTabInv') > -1) {
                this.showTabInv = true
                this.tabsindex = "3"
              }
              if (this.corp.infoMenu.indexOf('tabFinance') > -1) {
                this.showTabFinance = true
                this.tabsindex = "2"
              }
              if (this.corp.infoMenu.indexOf('tabShareholder') > -1) {
                this.showTabShareholder = true
                this.tabsindex = "1"
              }
              if (this.corp.infoMenu.indexOf('tabInfo') > -1) {
                this.showTabInfo = true
                this.tabsindex = "0"
              }
            }
            this.corpbak = JSON.parse(JSON.stringify(this.corp))
          },
          resp => {
            this.$message.error(resp.body)
          })
      },
      //关键信息保存
      onSave() {
        const _this = this
        _this.saveStatus = true
        _this.corp.dataVersion = this.dataVersion
        _this.corp.customerType = 'ENTERPRISE'
        _this.$refs.corp.validate((valid) => {
          if (valid) {
            let deptName = _this.corp.deptName
            _this.$http.put('/joys-rest/lss-customer/custInfo/corp', _this.corp, {
              params: {
                sourceModule: "基础关键资料",
              }
            }).then(resp => {
              _this.corp = resp.body
              _this.corp.deptName = deptName
              _this.corpbak = _this.corp
              _this.editMain = true
              _this.saveStatus = false
              _this.dataVersion = _this.corp.dataVersion
              _this.$message.success('保存成功!')
            }, resp => {
              _this.saveStatus = false
              _this.$message.error('操作异常')
            })
          } else {
            _this.saveStatus = false
            return false
          }
        })
        _this.saveStatus = false
      },
      //表单取消按钮
      cancel() {
        this.editMain = true
        this.corp = this.corpbak
        this.$refs.corp.clearValidate()
      },
      //corpInfo保存回调
      infoValue: function (val) {
        this.dataVersion = val
      },
      //表单编辑按钮
      edit() {
        this.editMain = false
        //备份当前表单
        this.corpbak = JSON.parse(JSON.stringify(this.corp))
      },
      //增加tab页
      addTab(model) {
        if ('tabInfo' == model) {
          this.showTabInfo = true
          this.tabsindex = "0"
        }
        if ('tabShareholder' == model) {
          this.showTabShareholder = true
          this.tabsindex = "1"
        }
        if ('tabFinance' == model) {
          this.showTabFinance = true
          this.tabsindex = "2"
        }
        if ('showTabInv' == model) {
          this.showTabInv = true
          this.tabsindex = "3"
        }
        if ('showTabMar' == model) {
          this.showTabMar = true
          this.tabsindex = "4"
        }
        if ('showTabGua' == model) {
          this.showTabGua = true
          this.tabsindex = "5"
        }
        if ('tabAtt' == model) {
          this.showTabAtt = true
          this.tabsindex = "6"
        }
        if (this.corp.infoMenu && this.corp.infoMenu != '') {
          this.corp.infoMenu = this.corp.infoMenu + ';' + model
        } else {
          this.corp.infoMenu = model
        }
        this.$http.post('/joys-rest/lss-customer/custInfo/tabs/' + this.customerId, null, {
          params: {
            'infoMenu': this.corp.infoMenu,
            'customerType': this.corp.customerType
          }
        }).then(resp => {

        })
      },
      //主办客户经理回调
      mainManagerChangeMatched(val) {
        this.$set(this.corp, 'mainManagerId', val.userId)
        this.$set(this.corp, 'deptName', val.deptName)
        this.$set(this.corp, 'deptId', val.deptId)
        this.corp.mainManagerName = val.userName
      },
      //协办客户经理回调
      viceManagerChangeMatched(val) {
        this.$set(this.corp, 'viceManagerId', val.userId)
        this.corp.viceManagerName = val.userName
      },
      invoiceAddress(val) {
        this.registeredAddress = val;
      },
      loadUpload() {
        this.fileList = []
        this.$http.get('/joys-rest/joys-file/file/lsfile/parent/' + this.parentId).then(
          resp => {
            this.fileList = resp.body
          },
          resp => {
            this.$message.error(resp.body.message)
          })
      },
      download(file) {
        window.open(
          window.location.origin + '/joys-rest/joys-file/file/byFileId?fileId=' + file.fileId)
      }
    }
  }
</script>
<style>
  .add-tabs-menu {
    padding: 0px;
    margin: 0px;
    backgroud-color: #353737;
  }

  .add-tabs_menu.el-dropdown-menu {
    padding: 0px;
    margin: 0px;
    backgroud-color: #353737;
  }

  .add-tabs-menu .el-dropdown-menu__item {
    padding: 0px;
    background: #353737;
  }

  .add-tabs-item.el-dropdown-menu__item {
    color: #C0C1C4;
    background: #353737;
  }

  .add-tabs-item.el-dropdown-menu__item.is-disabled {
    opacity: 0.3;
  }

  .add-tabs-item.el-dropdown-menu__item:focus, .dropdown-item.el-dropdown-menu__item:not(.is-disabled):hover {
    padding: 0px;
    color: #FFFFFF;
    background: #001616;
  }

  .add-tabs-item.el-dropdown-menu__item:not(.is-disabled):hover, .dropdown-item.el-dropdown-menu__item:focus {
    padding: 0px;
    color: #FFFFFF;
    background: #001616;
  }

  .add-tabs-item:active {
    padding: 0px;
    color: #FFFFFF;
    background: #001616;
  }

  .add-tabs-menu.el-popper[x-placement^="bottom"] {
    margin-top: 6px;
  }

  .add-tabs-menu.el-popper[x-placement^="bottom"] .popper__arrow {
    border-bottom-color: #353737;
  }

  .add-tabs-menu.el-popper[x-placement^="bottom"] .popper__arrow::after {
    border-bottom-color: #353737;
  }

  .tab .tabShow {
    padding: 20px;
    width: 100%;
  }

  .tabShow .tabul {
    height: 54px;
    margin: 0px;
    /* background:skyblue; */
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
  }

  .tabShow .tabul .tabli {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .tabShow .tabul .tabli .count {
    height: 100%;
    width: 100px;
    line-height: 54px;
    text-align: Center;
    position: relative;
  }

  .tabShow .tabul .tabli.active .count {
    color: #D62F17;
  }

  .tabShow .tabul .tabli.active .count .line {
    height: 4px;
    width: 60px;
    background: #D62F17;
    position: absolute;
    bottom: -2px;
    left: 20px;
  }

  .tabShow .tabCon {
    width: 100%;
    /*margin-top: 10px;*/
    font-size: 18px;
    flex-grow: 1;
    overflow-y: auto;
    height: 560px;
  }

  .tab .showOn {
    width: 100%;
    height: 200px;
    border-top: 1px solid #ccc;
    background: skyblue;
  }

  .tab .codeShow {
    cursor: pointer;
    width: 100%;
    height: 44px;
    border-top: 1px solid #ccc;
    position: relative;
  }

  .codeShow .trangleDown {
    width: 0;
    height: 0;
    border-width: 8px 8px 0;
    border-style: solid;
    border-color: rgb(211, 220, 230) transparent transparent;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -4px 0 0 -4px;
  }

  .codeShow .trangleUp {
    width: 0;
    height: 0;
    border-width: 0px 8px 8px;
    border-style: solid;
    border-color: transparent transparent rgb(211, 220, 230);
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -4px 0 0 -4px;
  }

  .codeShow .code {
    opacity: 0;
    color: rgb(211, 220, 230);
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -10px 0 0 20px;
  }

  .tab:hover .trangleDown {
    transition: all .3s ease 0s;
    transform: translateX(-40px);
  }

  .tab:hover .trangleUp {
    transition: all .3s ease 0s;
    transform: translateX(-40px);

  }

  .tab:hover .code {
    transition: all .3s ease 0s;
    transform: translateX(-30px);
    opacity: 1;
  }

  .codeShow:hover .trangleDown {
    border-color: #409eff transparent transparent;
  }

  .codeShow:hover .trangleUp {
    border-color: transparent transparent #409eff;
  }

  .codeShow:hover .code {
    color: #409eff;
  }
</style>
<style scoped>
  .cardBackColor {
    background-color: #F4F8F9
  }
</style>
